<template>
  <div class="page-pc-teacher-settled">
    <div class="search_left">
      <div class="search_left_title">
        查询进度
      </div>
      <div class="search_left_content">
        <div class="form_box">
          <div class="form_label">手机号：</div>
          <Input style="width:160px;" v-model="mobile" />
        </div>
        <div class="form_box">
          <div class="form_label">验证码：</div>
          <Input style="width:80px;" v-model="code" />
          <div :class="['form_code', !showSendText ? 'active' : '']">
            <span v-if="showSendText" @click="sendCode">发送验证码</span>
            <span v-else>重新获取({{ countDown }})</span>
          </div>
        </div>
        <div class="search_btn" @click="searchBtn">
          搜索
        </div>
        <div v-if="searchSuccessBox" class="search_box">
          <div v-if="searchForm && searchForm.status === 0">
            <Icon type="md-alert" size="100" color="var(--theme-color)" />
            <p>您的入驻申请正在审核中！</p>
          </div>
          <div v-if="searchForm && searchForm.status === 1">
            <Icon type="md-checkmark-circle" size="100" color="#19be6b" />
            <p>您的入驻申请已经通过啦，点击<a :href="web_info.BACKEN_HOST" target="_blank">管理入口</a></p>
          </div>
          <div v-if="searchForm && searchForm.status === 2">
            <Icon type="md-close-circle" size="100" color="#ed4014" />
            <p>您的入驻申请已被拒绝，拒绝原因：{{searchForm.remark ? searchForm.remark :'无'}}，去<a href="javascript:;" @click="toEditForm(2)">编辑</a>！</p>
          </div>
          <div v-if="!searchForm">
            <Icon type="md-search" size="100" color="#f90" />
            <p>没有查询到结果哟！</p>
          </div>
        </div>
      </div>
    </div>
    <div class="form_right">
      <div class="form_box" v-if="!successBox">
        <h1 style="text-align:center;font-size:28px;margin-bottom:40px;">教师入驻申请表</h1>
        <Row>
          <Col span="12">
            <div class="form_box_item">
              <input
                class="form_box_item_input"
                type="text"
                v-model="form.acName"
                name="acName"
                placeholder="请输入您的真实姓名"
              />
              <div class="form_box_item_required">*</div>
            </div></Col
          >
          <Col span="12"
            ><div class="form_box_item">
              <input
                class="form_box_item_input"
                type="text"
                v-model="form.idNumber"
                name="idNumber"
                placeholder="请输入您的身份证号"
              />
              <div class="form_box_item_required">*</div>
            </div></Col
          >
        </Row>
        <Row>
          <Col span="12">
            <div class="form_box_item">
              <input
                class="form_box_item_input"
                type="text"
                v-model="form.designation"
                name="designation"
                placeholder="请输入您的职称"
              />
              <div class="form_box_item_required">*</div>
            </div></Col
          >
          <Col span="12"
            ><div class="form_box_item">
              <input
                class="form_box_item_input"
                type="text"
                v-model="form.email"
                name="email"
                placeholder="请输入您的邮箱"
              />
              <div class="form_box_item_required">*</div>
            </div></Col
          >
        </Row>

        <div class="form_box_item" style="width: 420px;">
          <div class="form_box_item_lebel">请选择您的性别 :</div>
          <div class="form_box_item_text" style="margin-left:40px;">
            <RadioGroup v-model="form.gender">
              <Radio label="1" style="margin-right:40px;">
                  <span>男</span>
              </Radio>
              <Radio label="0">
                  <span>女</span>
              </Radio>
            </RadioGroup>
          </div>
          <div class="form_box_item_required">*</div>
        </div>

        <div class="form_box_item" style="width: 420px;">
          <div class="form_box_item_lebel">请选择您的生日 :</div>
          <div class="form_box_item_text">
            <DatePicker style="margin-left:20px;" type="date" v-model="form.birthday"></DatePicker>
            <!-- <div class="time_box">{{ form.birthday }}</div> -->
          </div>
          <div class="form_box_item_required">*</div>
        </div>
        <div class="form_box_item avatar">
          <div class="form_box_item_lebel">请上传您的头像</div>
          <div :class="['form_box_item_avatar', avatarUrl ? 'active' : '']">
            <Upload action="#" :format="['jpg','jpeg','png']" style="width:100%;height:100%;" :before-upload="handleUploadExport" :show-upload-list="false">
              <div style="width: 120px;height: 120px;cursor: pointer;">
                <img v-if="avatarUrl" :src="avatarUrl" style="width: 120px;height: 120px;">
              </div>
              
            </Upload>
          </div>
          <div class="form_box_item_required">*</div>
        </div>
        <div class="form_box_item textarea" style="width: 420px;">
          <textarea
            class="form_box_item_textarea"
            v-model="form.introduce"
            name="introduce"
            rows="3"
            cols="20"
            placeholder="请输入您的简介"
          ></textarea>
          <div class="form_box_item_required">*</div>
        </div>

        <div class="form_box_item">
          <input
            class="form_box_item_input"
            type="text"
            v-model="form.mobile"
            name="mobile"
            placeholder="请输入您的手机"
          />
          <div class="form_box_item_required">*</div>
        </div>
        <div class="form_box_item">
          <input
            class="form_box_item_input"
            type="text"
            style="width:60%;"
            v-model="form.captcha"
            name="captcha"
            placeholder="请输入验证码"
          />
          <div
            :class="['send_code', isShowCountDown ? 'count_down' : '']"
            @click="sendFormCode()"
          >
            <span v-if="!isShowCountDown">发送验证码</span>
            <span v-else>重新获取({{ formCountDown }})</span>
          </div>
          <div class="form_box_item_required">*</div>
        </div>
        <div class="form_box_item">
          <input
            class="form_box_item_input"
            type="text"
            v-model="form.password"
            name="password"
            placeholder="请输入您的密码"
          />
          <div class="form_box_item_required">*</div>
        </div>
        <div class="form_submit-btn" @click="submitForm">提交</div>
      </div>
      <div class="success_box"  v-if="successBox">
        <div>
          <Icon type="md-checkmark-circle" size="100" color="var(--theme-color)" />
          <p>资料提交成功，请耐心等待审核！</p>
        </div>
        <!-- <div v-if="searchSuccessBox && searchForm && searchForm.status === 0">
          <Icon type="md-alert" size="100" color="var(--theme-color)" />
          <p>您的入驻申请正在审核中！</p>
        </div>
        <div v-if="searchSuccessBox && searchForm && searchForm.status === 1">
          <Icon type="md-checkmark-circle" size="100" color="#19be6b" />
          <p>您的入驻申请已经通过啦，点击<a :href="web_info.BACKEN_HOST" target="_blank">管理入口</a></p>
        </div>
        <div v-if="searchSuccessBox && searchForm && searchForm.status === 2">
          <Icon type="md-close-circle" size="100" color="#ed4014" />
          <p>您的入驻申请已被拒绝，拒绝原因：{{searchForm.remark ? searchForm.remark :'无'}}，返回<a href="javascript:;" @click="toEditForm(2)">编辑</a>！</p>
        </div>
        <div v-if="searchSuccessBox && !searchForm">
          <Icon type="md-search" size="100" color="#f90" />
          <p>没有查询到结果哟，返回<a href="javascript:;" @click="toEditForm(1)">填写</a>！</p>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { fileToBase64 } from '~/utils/file';
import { getTeacherSmsCode } from "~/api/account/user";
import { saveTeacherSettled,getTeacherSettledStatus,updateTeacherSettled } from "~/api/teacher";
export default {
  components: {},
  data() {
    return {
      searchForm:null,
      mobile: "",
      showSendText: true,
      countDown: 60,
      formCountDown: 60,
      code: "",
      avatarUrl:"",
      isShowCountDown:false,
      successBox:false,
      searchSuccessBox:false,
      form: {
        acName: "",
        idNumber: "",
        gender: "",
        email: "",
        mobile: "",
        password: "",
        introduce: "",
        designation: "",
        birthday: "",
        captcha: "",
        file: ""
      },
      flag:false,
    };
  },
  computed: {
    ...mapState({
      web_info(state) {
        return state.web_info;
      },
    })
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    initPages(){
        this.form = {
            acName:null,
            idNumber:null,
            gender:null,
            email:null,
            mobile:null,
            password:null,
            introduce:null,
            designation:null,
            birthday:null,
            captcha:null,
            file:null,
        },
        this.searchForm = {};
        this.mobile =  "";
        this.showSendText =  true;
        this.countDown =  60;
        this.formCountDown =  60;
        this.code =  "";
        this.avatarUrl = "";
        this.isShowCountDown = false;
        this.successBox = false;
        this.searchSuccessBox = false;
    },
    parseTime(time, pattern) {
        if (arguments.length === 0 || !time) {
            return null
        }
        const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
        let date
        if (typeof time === 'object') {
            date = time
        } else {
            if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
                time = parseInt(time)
            } else if (typeof time === 'string') {
                time = time.replace(new RegExp(/-/gm), '/');
            }
            if ((typeof time === 'number') && (time.toString().length === 10)) {
                time = time * 1000
            }
            date = new Date(time)
        }
        const formatObj = {
            y: date.getFullYear(),
            m: date.getMonth() + 1,
            d: date.getDate(),
            h: date.getHours(),
            i: date.getMinutes(),
            s: date.getSeconds(),
            a: date.getDay()
        }
        const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
            let value = formatObj[key]
            // Note: getDay() returns 0 on Sunday
            if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
            if (result.length > 0 && value < 10) {
                value = '0' + value
            }
            return value || 0
        })
        return time_str
    },
    toEditForm(type){
      if(type == 1){
        this.initPages();
      }else{
        this.form = {
          ...this.form,
          ...this.searchForm,
          birthday:new Date(this.searchForm.birthdayStr),
          captcha:"",
          gender:this.searchForm.gender+''
        }
        this.avatarUrl = this.searchForm.avatar;
        this.successBox = false;
        this.searchSuccessBox = false;
      }
      
    },
    async handleUploadExport (file) {
        fileToBase64(file,(base64)=>{
          this.avatarUrl = base64;
        });
        this.form = {
          ...this.form,
          file:file
        }
        return false;
    },
    async submitForm(){
      const { acName, idNumber, email, gender, mobile, password, introduce, designation, birthday, captcha } = this.form;
            if(!(acName && acName.trim())){
                this.$Message.warning('请输入您的真实姓名');
                return;
            }
            if(!(idNumber && idNumber.trim())){
                this.$Message.warning('请输入您的身份证号');
                return;
            }else{
                if (!(/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(idNumber))) {
                    this.$Message.warning('请输入正确的身份证号');
                    return;
                }
            }
            
            if(!(designation && designation.trim())){
                this.$Message.warning('请输入您的职称');
                return;
            }
            if(!(email && email.trim())){
                this.$Message.warning('请输入您的邮箱');
                return;
            }else{
                if (!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email))) {
                    this.$Message.warning('请输入正确的邮箱');
                    return;
                }
            }
            if(!gender){
                this.$Message.warning('请选择您的性别');
                return;
            }
            if(!birthday){
                this.$Message.warning('请选择您的生日');
                return;
            }
            if(!(this.avatarUrl || this.form.file)){
                this.$Message.warning('请上传您的头像');
                return;
            }
            if(!(introduce && introduce.trim())){
                this.$Message.warning('请输入您的简介');
                return;
            }
            
            if(!(mobile && mobile.trim())){
                this.$Message.warning('请输入您的手机');
                return;
            }else{
                if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(mobile))) {
                    this.$Message.warning('请输入正确的手机');
                    return;
                }
            }
            if(!(captcha && captcha.trim())){
                this.$Message.warning('请输入验证码');
                return;
            }
            if(!(password && password.trim())){
                this.$Message.warning('请输入您的密码');
                return;
            }else{
                if (!(/^[a-zA-Z0-9\S,.!@$^&*-=+`~?:;]{6,16}$/.test(password))) {
                    this.$Message.warning('密码格式不正确');
                    return;
                }
            }
            let params = {
                ...this.form,
                birthday:this.parseTime(this.form.birthday,'{y}-{m}-{d}')
            }
            if(!params.file){
              delete params.file
            }
            if(params.id){
              delete params.createTime
            }
            let fd = new FormData();
            Object.keys(params).forEach(i => {
                if(params[i]){
                    fd.append(i, params[i]);
                }
            });
            this.SET_IS_LOADING(true);
            if(this.flag){
                return;
            }
            this.flag = true;
            if(params.id){
              let result = await updateTeacherSettled(fd);
              if (result && result.data && result.data.code == 200) {
                  this.successBox = true;
                  this.searchSuccessBox = false;
                  this.SET_IS_LOADING(false);
                  this.flag = false;
              }else if(result && result.data && result.data.code == 1001){
                  this.$Message.warning(result.data.msg);
                  this.SET_IS_LOADING(false);
                  this.flag = false;
              } else {
                  this.$Message.warning('编辑失败');
                  this.SET_IS_LOADING(false);
                  this.flag = false;
              }
            }else{
              let result = await saveTeacherSettled(fd);
              if (result && result.data && result.data.code == 200) {
                  this.successBox = true;
                  this.searchSuccessBox = false;
                  this.SET_IS_LOADING(false);
                  this.flag = false;
              }else if(result && result.data && result.data.code == 1001){
                  this.$Message.warning(result.data.msg);
                  this.SET_IS_LOADING(false);
                  this.flag = false;
              } else {
                  this.$Message.warning('提交失败');
                  this.SET_IS_LOADING(false);
                  this.flag = false;
              }
            }
            
    },
    async sendFormCode() {
      if (this.isShowCountDown) {
        return;
      }
      if (!(this.form.mobile && this.form.mobile.trim())) {
        alert("请输入您的手机");
        return;
      } else {
        if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile)) {
          alert("请输入正确的手机号");
          return;
        }
      }
      this.isShowCountDown = true;
      let result = await getTeacherSmsCode({
          number : this.form.mobile
      })
      if(result && result.data && result.data.code == 200){
        let timer = setInterval(() => {
          this.formCountDown--;
          if (this.formCountDown <= 0) {
            this.formCountDown = 60;
            clearInterval(timer);
            this.isShowCountDown = false;
          }
        }, 1000);
      }else{
          this.$Message.error("发送失败！");
          return;
      }
      
    },
    async sendCode() {
      if (!this.showSendText) {
        return;
      }
      if (!(this.mobile && this.mobile.trim())) {
        alert("请输入您的手机");
        return;
      } else {
        if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile)) {
          alert("请输入正确的手机号");
          return;
        }
      }
      this.showSendText = false;
      let result = await getTeacherSmsCode({
          number : this.mobile
      })
      if(result && result.data && result.data.code == 200){
        let timer = setInterval(() => {
          this.countDown--;
          if (this.countDown <= 0) {
            this.countDown = 60;
            clearInterval(timer);
            this.showSendText = true;
          }
        }, 1000);
      }else{
          this.$Message.error("发送失败！");
          return;
      }
      
    },
    async searchBtn() {
      if (!(this.mobile && this.mobile.trim())) {
        alert("请输入您的手机");
        return;
      } else {
        if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile)) {
          alert("请输入正确的手机号");
          return;
        }
      }
      if (!(this.code && this.code.trim())) {
        alert("请输入验证码");
        return;
      } else {
        if (!/^\d{6}$/.test(this.code)) {
          alert("请输入正确的验证码");
          return;
        }
      }
      let params = {
        mobile : this.mobile,
        captcha : this.code,
      }
      this.SET_IS_LOADING(true);
      let result = await getTeacherSettledStatus(params);
      if (result && result.data && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        this.mobile = "";
        this.code = "";
        this.countDown = 60;
        this.showSendText =  true;
        this.searchForm = result.data.data;
        this.searchSuccessBox = true;
        // this.successBox = true;
      }else if(result && result.data && result.data.code == 1001){
        this.$Message.warning(result.data.msg);
      } else {
        this.SET_IS_LOADING(false);
      }
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-pc-teacher-settled {
  padding-top: 30px;
  min-height: 100vh;
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 30px;
  
  .search_left {
    width: 260px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: rgb(187, 187, 187) 0px 1px 2px;
    .search_left_title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      text-align: center;
      color: #ffffff;
      background: var(--theme-color);
    }
    .search_left_content {
      padding: 20px;
      .form_box {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        .form_label {
          font-size: 14px;
          width: 58px;
        }
        .form_code {
          width: 80px;
          color: var(--theme-color);
          text-align: center;
          cursor: pointer;
          &.active {
            color: #cccccc;
          }
        }
      }
      .search_btn {
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        color: #ffffff;
        background: var(--theme-color);
        margin-top: 20px;
        border-radius: 6px;
        cursor: pointer;
      }
      .search_box{
        padding: 50px 0;
        text-align: center;
        font-size: 16px;
        p{
          margin-top: 10px;
        }
        a{
          color: var(--theme-color);
        }
      }
    }
  }
  .form_right {
    width: 910px;
    padding: 40px 20px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: rgb(187, 187, 187) 0px 1px 2px;
    .form_box {
      width: 90%;
      margin: 0 auto;
      .form_box_item {
        margin-bottom: 20px;
        width: 300px;
        height: 54px;
        background: #f4f4f7;
        border-radius: 5px;
        position: relative;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 10px;
        .send_code {
          width: 40%;
          color: var(--theme-color);
          font-size: 14px;
          text-align: center;
          cursor: pointer;
          &.count_down {
            color: #cccccc;
          }
        }
        &.avatar {
          width: 420px;
          height: 260px;
          background: #f4f4f7;
          border-radius: 5px;
          display: block;
        }
        &.textarea {
          height: auto;
          padding: 10px 0;
        }
        input::-webkit-input-placeholder {
          /* WebKit browsers */
          color: #cccccc;
        }
        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #cccccc;
        }
        input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #cccccc;
        }
        input:-ms-input-placeholder {
          /* Internet Explorer 10+ */
          color: #cccccc;
        }
        textarea::-webkit-input-placeholder {
          /* WebKit browsers */
          color: #cccccc;
        }
        textarea:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #cccccc;
        }
        textarea::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #cccccc;
        }
        textarea:-ms-input-placeholder {
          /* Internet Explorer 10+ */
          color: #cccccc;
        }
        .form_box_item_input {
          width: 100%;
          height: 54px;
          border: none;
          line-height: 54px;
          background: #f4f4f7;
          font-size: 16px;
          border-radius: 5px;
          //   padding: 0 10px;
        }
        .form_box_item_lebel {
          min-width: 100px;
          height: 54px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #cccccc;
          line-height: 54px;
        }
        .form_box_item_textarea {
          //   width: 100%;
          border: none;
          //   line-height: 30px;
          font-size: 16px;
          padding: 0 10px;
          width: 420px;
          height: 122px;
          background: #f4f4f7;
          border-radius: 5px;
        }
        .form_box_item_avatar {
          width: 120px;
          height: 120px;
          border-radius: 8px;
          border: 3px dotted #cccccc;
          overflow: hidden;
          margin: 24px auto;
          position: relative;
          &.active {
            &::after {
              display: none;
            }
            &::before {
              display: none;
            }
          }
          .avatar-uploader {
            width: 100%;
            height: 100%;
            .avatar-contain-box {
              width: 100%;
              height: 100%;
            }
          }
          &::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            content: "";
            width: 22px;
            height: 3px;
            background: #cccccc;
            z-index: 1;
          }
          &::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            content: "";
            width: 3px;
            height: 22px;
            background: #cccccc;
            z-index: 1;
          }
        }
        .form_box_item_text {
          .time_box {
            width: 154px;
            height: 54px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 54px;
            position: relative;
            &::before {
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              content: "";
              border-top: 6px solid transparent;
              border-bottom: 6px solid transparent;
              border-left: 6px solid var(--theme-color);
            }
          }
        }
        .form_box_item_required {
          position: absolute;
          left: -10px;
          top: 2px;
          width: 9px;
          height: 16px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ff5252;
          line-height: 16px;
        }
      }
      .form_submit-btn{
        cursor: pointer;
        margin-left: 264px;
        width: 160px;
        height: 60px;
        border-radius: 5px;
        text-align: center;
        font-size: 16px;
        line-height: 60px;
        color: #ffffff;
        background: var(--theme-color);
      }
    }
    .success_box{
      padding: 30px 0;
      text-align: center;
      font-size: 16px;
      p{
        margin-top: 10px;
      }
      a{
        color: var(--theme-color);
      }
    }
    
  }
}
</style>
<style lang="scss">
.page-pc-teacher-settled {
  .ivu-radio-group-item{
    font-size: 16px;
  }
}
</style>
